@import 'ui-variables';

@atom-ternjs-padding: 20px;
@atom-ternjs-margin: 20px;
@atom-ternjs-height: 180px;

atom-ternjs-reference > div > div {

  max-height: @atom-ternjs-height;
  overflow-y: auto;
}

atom-ternjs-rename {

  > div {

    padding: @atom-ternjs-padding;
  }
}

atom-ternjs-reference {

  > div {

    position: relative;
  }
}

atom-ternjs-reference {

  > div {

    > div {

      padding: 0 @atom-ternjs-padding @atom-ternjs-padding;
    }
  }

  ul {

    list-style: none;
    padding-left: 0;
  }

  li {

    cursor: pointer;
    padding: 6px 0;

    &:hover {

      background: rgba(100, 100, 100, 0.3);
    }
  }

  h3 {

    margin: 0;

    > span {

      display: block;
      float: left;

      &:first-child {

        width: 70%;
      }

      &:nth-child(2) {

        width: 30%;
        text-align: right;
      }
    }
  }

  .clear {

    clear: left;
  }

  strong {

    color: @text-color-info;
  }

  .darken {

    color: darken(@text-color, 20%);
  }
}

.atom-ternjs-documentation,
.atom-ternjs-type {

  max-width: 1000px;
  background: @overlay-background-color;
  color: @text-color-highlight;
  border-radius: @component-border-radius;

  h3,
  p,
  a {

    word-break: break-word;
  }
}

.atom-ternjs-documentation {

  border: 10px solid @base-border-color;
}

.atom-ternjs-type {

  padding: 5px 20px;
  border: 1px solid @base-border-color;
}

atom-ternjs-type,
atom-ternjs-documentation {

  > div {

    max-height: calc(100vh / 3);
    overflow-y: auto;
  }
}

atom-ternjs-documentation {

  > div:not(:empty) {

    padding: 5px 20px;
  }
}

atom-ternjs-type {

  color: @text-color;

  .doc-param-first,
  .storage.type {

    display: inline-block;
  }

  .doc-param-first,
  .doc-return {

    margin-top: 10px;
  }

  .current-param {

    font-weight: 500;
  }
}

atom-text-editor[data-grammar="source js"] {

  .atom-ternjs-definition-marker {

    div {

      transition: opacity 0.75s ease;
      opacity: 0;
      background: @background-color-selected;
      border-bottom: 4px solid @background-color-warning;
    }

    &.active {

      div {

        opacity: 1;
      }
    }
  }
}

.atom-ternjs-reference-close {

  margin: @atom-ternjs-padding;
  position: absolute;
  right: 0;
  top: 0;
}

.atom-ternjs-config,
atom-ternjs-rename {

  .btn {

    width: 100%;
    padding: @atom-ternjs-padding / 2 0;
  }
}

.atom-ternjs-config {

  > div {

    max-height: 100%;
    padding: @atom-ternjs-padding;
    overflow: scroll;
  }

  h1 {

    margin-bottom: 50px;
    color: @text-color-info;
  }

  h2 {

    width: 100%;
  }

  section {

    padding-bottom: 20px;
    border-top: 5px solid @base-border-color;
  }

  atom-text-editor {

    width: calc(~"100% - 60px");
  }

  .add,
  .sub {

    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .add {

    right: 0;
  }

  .sub {

    right: 30px;
  }

  .input-wrapper {

    position: relative;
  }

  .input-wrapper {

    span {

      font-size: 12px;
    }

    &:first-of-type {

      .sub {

        display: none;
      }
    }

    + .input-wrapper {

      margin-top: 10px;
    }
  }

  .libs,
  .ecmaVersion,
  .plugins {

    span {

      margin-right: 10px;
    }
  }

  .libs,
  .ecmaVersion {

    .input-wrapper {

      display: inline-block;

      + .input-wrapper {

        margin-left: 20px;
      }
    }
  }

  .plugins {

    .input-wrapper {

      margin-bottom: 5px;
    }
  }

  .input-wrapper:not(:last-of-type) {

    .add {

      display: none;
    }
  }
}
